<template>
  <div class="form-container">
    <el-skeleton animated :rows="8" :loading="data.isFirst">
      <el-descriptions
        direction="vertical"
        :column="2"
        border
        class="form-card"
      >
        <!-- 内容区块 -->
        <el-descriptions-item
          label="跟进内容"
          :span="2"
          label-class-name="form-label"
          content-class-name="form-content"
        >
          <el-input
            type="textarea"
            v-model="data.request.content"
            :rows="4"
            placeholder="请输入详细跟进内容..."
            resize="none"
            show-word-limit
          />
        </el-descriptions-item>

        <!-- 时间选择 -->
        <el-descriptions-item
          label="跟进时间"
          width="50%"
          label-class-name="form-label"
        >
          <el-date-picker
            v-model="data.request.next_time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择跟进时间"
            class="full-width-picker"
          />
        </el-descriptions-item>

        <!-- 地点输入 -->
        <el-descriptions-item
          label="本次跟进地点"
          label-class-name="form-label"
        >
          <el-input
            v-model="data.request.location"
            placeholder="输入或选择常用地点"
            clearable
          >
            <template #prefix>
              <el-icon><Location /></el-icon>
            </template>
          </el-input>
        </el-descriptions-item>

        <!-- 转换开关 -->
        <el-descriptions-item label="会员转换" label-class-name="form-label">
          <div class="switch-container">
            <el-switch
              v-model="data.request.isConvert"
              @change="events.convert_change"
              inline-prompt
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="转换"
              inactive-text="不转换"
            />
            <span class="switch-tip">（开启后将自动标记跟进成功）</span>
          </div>
        </el-descriptions-item>

        <!-- 成功率滑块 -->
        <el-descriptions-item label="预估成功率" label-class-name="form-label">
          <div class="slider-container">
            <el-slider
              v-model="data.request.success"
              @change="events.success_change"
              :step="10"
              :show-stops="true"
              :format-tooltip="val => `${val}%`"
            />
            <span class="slider-value">{{ data.request.success }}%</span>
          </div>
        </el-descriptions-item>

        <!-- ... 其他表单项保持结构不变，仅添加样式类 ... -->

        <!-- 操作按钮 -->
        <el-descriptions-item
          label="操作"
          :span="2"
          label-class-name="form-label"
        >
          <el-button
            @click="events.add"
            :disabled="!events.check()"
            type="primary"
            size="large"
            class="submit-btn"
          >
            <el-icon class="icon"><Plus /></el-icon>
            提交跟进记录
          </el-button>
          <span v-if="!events.check()" class="tip">* 请填写必填项（跟进内容和地点）</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-skeleton>
  </div>
</template>

<style scoped>
.form-container {
  padding: 20px;
}

.form-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:deep(.form-label) {
  width: 140px;
  font-weight: 600;
  color: #303133;
  background: #fafafa !important;
}

:deep(.form-content) {
  background: #fff !important;
}

.full-width-picker {
  width: 100%;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch-tip {
  color: #909399;
  font-size: 12px;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 16px;

  .el-slider {
    flex: 1;
  }
}

.slider-value {
  width: 60px;
  color: #409EFF;
  font-weight: 500;
}

.submit-btn {
  width: 100%;
  border-radius: 8px;
  padding: 18px 0;

}

.tip {
  display: block;
  color: #f56c6c;
  font-size: 12px;
  margin-top: 8px;
}

/* 优化输入框交互 */
:deep(.el-input:hover) .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) !important;
}

:deep(.el-input__wrapper) {
  transition: all 0.2s ease;
}

/* 美化滚动条 */
.form-card ::-webkit-scrollbar {
  width: 6px;
}

.form-card ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
</style>

<script setup lang="ts">
import { Add_Record, Get_Type } from "@/api/customer";
import { close_loading, notice, start_loading } from "@/utils/notice";
import type { Customer_Record_Add_Data } from "@/utils/type";
import dayjs from "dayjs";
import { onMounted, reactive } from "vue";

const emit = defineEmits(["myclose"]);

const data = reactive<Customer_Record_Add_Data>({
  request: {
    customer: sessionStorage.getItem("customer_id") || "",
    content: "",
    date: new Date(),
    result: "",
    success: 0,
    isConvert: false,
    next_time: "",
  },
  isFirst: true,
  type_list: [],
});

const methods = {
  async bind() {
    const res = await Get_Type({
      keys: ["origin"],
    });
    if (res.code === 0) {
      data.type_list = res.data.data;
    }
  },
};

const events = {
  /**
   * 是否转会员
   */
  convert_change() {
    // console.log("convert_change");
    if (data.request.isConvert) {
      data.request.result = data.type_list.find((e) => e.value == "0")?.id;
      data.request.success = 100;
    } else {
      data.request.result = data.type_list.find((e) => e.value == "1")?.id;
      data.request.success = 50;
    }
  },

  /**
   * 预估成功率
   */
  success_change() {
    // console.log("succscc_change");
    if (data.request.success === 100) {
      data.request.result = data.type_list.find((e) => e.value == "0")?.id;
      data.request.isConvert = true;
    } else {
      data.request.result = data.type_list.find((e) => e.value == "1")?.id;
      data.request.isConvert = false;
    }
  },

  /**
   * 新增
   */
  async add() {
  start_loading();
  const res = await Add_Record({
    ...data.request,
    date: dayjs(data.request.date).format("YYYY-MM-DD"),
    next_time: dayjs(data.request.next_time).format("YYYY-MM-DD"),
    isConvert: data.request.isConvert ? 1 : 0,
  });
  close_loading();
  notice(res);
  if (res.code === 0) {
    emit("myclose");
  }
},

  check() {
    // console.log("check");
    if (
      data.request.content == null ||
      data.request.content.trim().length === 0
    ) {
      return false;
    }
    if (data.request.location == null || data.request.location.length === 0) {
      return false;
    }
    return true;
  },
};

onMounted(async () => {
  await methods.bind();
  data.isFirst = false;
});
</script>
